<template>
  <div class="container" v-if="data">
    <div class="backblur" v-if="!data.background">
      <van-image :src="data.background" fit="cover" width="100%" height="100%" />
    </div>
    <div v-if="data.broadcast.length>0" class="care-swipe">
      <van-swipe :autoplay="8000" :height="200">
        <van-swipe-item
          v-for="(item, index) in data.broadcast"
          :key="index"
          @click="pushNativelink(item.weblink)"
        >
          <van-image :src="item.thumb" fit="cover" width="100%" height="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-list v-model="loading" :finished="finished" @load="onList">
      <div v-for="(item,index) in list" :key="index">
        <van-divider>
          <span>{{item.title}}</span>
        </van-divider>
        <van-grid
          :column-num="2"
          clickable
          :border="false"
          :gutter="10"
          class="account-grid"
        >
          <van-grid-item
            class="goods-item"
            v-for="(goods,gk) in item.products"
            :key="gk"
            @click="pushNativelink(goods.weblink)"
          >
            <van-image :src="goods.thumb" fit="cover">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <div class="goods-item-body">
              <div class="goods-item-body__name">{{goods.name}}</div>
              <div class="goods-item-body__desc">{{goods.description}}</div>
              <div class="goods-item-body__price price-cny">{{goods.price}}</div>
            </div>
            <van-button
              type="danger"
              size="small"
              v-if="goods.button"
              @click="pushNativelink(goods.button)"
            >{{goods.button.text}}</van-button>
          </van-grid-item>
        </van-grid>
      </div>
    </van-list>
  </div>
</template>

<script>
import {
  Tag,
  Divider,
  Icon,
  Cell,
  CellGroup,
  Button,
  Grid,
  GridItem,
  Loading,
  Image,
  Swipe,
  SwipeItem,
  List
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Divider.name]: Divider,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    [Button.name]: Button,
    [Loading.name]: Loading,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [List.name]: List
  },

  data () {
    return {
      data: {
        background: '',
        broadcast: []
      },
      list: [],
      loading: false,
      finished: false,
      count: 0,
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },
  created () {
    this.onLoad()
  },

  methods: {
    onLoad () {
      this.axios
        .get('/activity/care')
        .then(response => {
          this.data = Object.assign({}, this.data, response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onList () {
      let page = this.meta.currentPage + 1
      this.axios
        .get('/activity/care/list', {
          params: { page: page },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  position: relative;
  background: #b614bc;
  padding-bottom: 50px;
}
.backblur {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  -webkit-filter: blur(60px);
  -moz-filter: blur(60px);
  -o-filter: blur(60px);
  -ms-filter: blur(60px);
  filter: blur(60px);
  z-index: -1;
}
.van-divider {
  padding: 0 10px;
  margin: 30px 0 20px;
  border-color: rgba(255, 255, 255, 0.6);
  span {
    font-size: 18px;
    font-weight: 600;
    position: relative;
    display: block;
    background-image: -webkit-linear-gradient(
      bottom,
      rgba(255, 255, 255, 0.8),
      yellow
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    &::after,
    &::before {
      width: 1px;
      height: 60%;
      content: "";
      background: rgba(255, 255, 255, 0.6);
      position: absolute;
      top: 20%;
    }
    &::before {
      left: -30px;
    }
    &::after {
      right: -30px;
    }
  }
}
.goods-item {
  overflow: hidden;
  &-body {
    padding: 10px 5px 0;
    text-align: center;
    width: 100%;
    > * {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 100%;
    }
    &__name {
      font-size: 14px;
      line-height: 24px;
    }
    &__desc {
      font-size: 12px;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.5);
      transform: scale(0.8);
    }
    &__price {
      font-size: 16px;
      line-height: 24px;
      color: #ff6600;
    }
  }
  .van-button {
    margin-top: 10px;
  }
}
/deep/ .van-grid-item {
  &__content {
    border-radius: 5px;
    padding: 0 0 10px;
    .van-image {
      width: 100%;
      padding-bottom: 100%;
      height: 0;
      background: #f1f1f1;
      border-radius: 5px 5px 0 0;
      &__img {
        position: absolute;
        border-radius: 5px 5px 0 0;
      }
      &__error {
        background: transparent;
      }
    }
  }
}

.care-swipe {
  padding: 15px 0;
  .van-swipe-item {
    padding: 0 10px;
  }
  /deep/ .van-image {
    &__img {
      border-radius: 5px;
    }
  }
}
.van-list {
  min-height: 100vh;
}
</style>
